<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    var dataString;
    function addData(data) {dataString = data}
    window.webkit.messageHandlers.data.postMessage('data');
    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart); function drawChart() {
        var dataTable = new google.visualization.DataTable({
          cols: [
            {id: 'eventType', label: 'Event Type', type: 'string'},
            {id: 'start', label: 'Event Start Time', type: 'datetime'},
            {id: 'end', label: 'Event End Time', type: 'datetime'}],
            rows: dataString
        });
        var options = {'title':'Telemetry Log Data',
                      'width':1024,
                      'height':400,
                      'timeline': { groupByRowLabel: true }
                    };
        var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'ready', afterDraw);
        chart.draw(dataTable, options);
      }
      function afterDraw() {window.webkit.messageHandlers.complete.postMessage('complete');}
  </script>
</head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>
